<template>
  <div class="main training-container" direction="column" align="stretch">
    <div class="body">
      <el-table
        :data="tableData"
        style="width: 100%"
        :show-overflow-tooltip="true"
        tooltip-effect="dark popper_sty"
      >
        <el-table-column prop="businessName" label="业务名称" align="center">
        </el-table-column>
        <el-table-column prop="field" label="处理字段" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center">
        </el-table-column>
        <el-table-column prop="updateUserName" label="更新人" align="center">
        </el-table-column>
      </el-table>
      <div class="tips">
        <p class="tit">功能说明：</p>
        <div class="d-flex" style="margin-top: 12px">
          <span class="left_tit">训练营模式开启：</span>
          <div>
            <p>
              1.线索、学员、合同、回款、VIP学员的功能模块都会有<span
                class="color-tips"
                >【训练营期数】、</span
              ><span class="color-tips">【营销讲师】</span>、字段的<span
                class="color-tips"
                >编辑</span
              >、<span class="color-tips">关联；</span>
            </p>
            <p style="margin-top: 12px">
              2.将线索转化为学员的时候，会有弹窗展示填写【训练营期数】、【营销讲师】，同时可设置<span
                class="color-tips"
                >是否非必填。</span
              >
            </p>
          </div>
        </div>
        <div class="d-flex" style="margin-top: 24px">
          <span class="left_tit">训练营模式关闭：</span>
          <div>
            <p>
              1. 线索、学员、合同、回款、VIP学员的功能模块都将<span
                class="color-tips"
                >【训练营期数】</span
              >、<span class="color-tips">【营销讲师】、字段隐藏；</span>
            </p>
            <p style="margin-top: 12px">
              2. 将线索转化为学员的时候无限制条件，<span class="color-tips"
                >直接转化。</span
              >
            </p>
          </div>
        </div>
        <p class="dis_title">
          如图：转化学员时，该弹窗字段可根据训练营模式的开关，灵活配置。
        </p>
        <el-image
          style="width: 965px;height:487px"
          :src="require('@/assets/img/admin/training.png')"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>
<script>
import {
  adminTrainingListAPI,
  adminTrainingUpdateAPI,
} from "@/api/admin/training.js";
export default {
  // 训练营模式
  data() {
    return {
      tableData: [],
      srcList: [require(`@/assets/img/admin/training.png`)],
    };
  },
  created() {
    // 获取训练营列表
    this.getTrainingList();
  },
  methods: {
    handleStatusChange(row) {
      let text = row.status == 1 ? "启用" : "停用";
      this.$confirm('确认要"' + text + '"训练营模式吗？', "提示", {
        type: "warning",
      })
        .then(() => {
          adminTrainingUpdateAPI({
            id: row.id,
            status: row.status == 0 ? 0 : 1,
          })
            .then((res) => {
              this.$message.success("修改成功");
              this.getTrainingList();
            })
            .catch(() => {
              row.status = row.status == 0 ? 1 : 0;
            });
        })
        .catch(function () {
          row.status = row.status == 0 ? 1 : 0;
        });
    },
    /**
     * 列表
     */
    getTrainingList() {
      adminTrainingListAPI({
        page: 1,
        limit: 15,
      }).then((res) => {
        this.tableData = res.data.records;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  font-family: Microsoft YaHei;
  width: 100%;
  background: #fff;
}

.body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: white;
  border-radius: $xr-border-radius-base;
  position: relative;
}
.training-container {
  .tips {
    margin-top: 24px;
    font-size: 12px;
    color: #666666;
    .tit {
      font-size: 14px;
    }
    .left_tit {
      color: #333333;
    }
  }
  .color-tips {
    color: #0066f9;
  }
  .dis_title {
    margin-top: 34px;
    margin-bottom: 14px;
  }
}
</style>